<template>
	<view>
		<view class="">test</view>
		<view class="container">
			<view class="container-wrap">
				<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
			</view>
		</view>
	</view>
</template>

<script>
import echarts from "../../components/echarts-uniapp/echarts-uniapp.vue"
export default {
	data() {
		return {
			option: {},
		}
	},
	components: {
		echarts
	},
	onReady() {
		this.option = {
			title: {
				text: '测试下面legend的红色区域不应被裁剪',
				left: 'center'
			},
			legend: {
				data: ['A', 'B', 'C'],
				top: 50,
				left: 'center',
				backgroundColor: 'red',
				z: 100
			},
			grid: {
				containLabel: true
			},
			tooltip: {
				show: true,
				trigger: 'axis'
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				// show: false
			},
			yAxis: {
				x: 'center',
				type: 'value',
				splitLine: {
					lineStyle: {
						type: 'dashed'
					}
				}
				// show: false
			},
			series: [{
				name: 'A',
				type: 'line',
				smooth: true,
				data: [18, 36, 65, 30, 78, 40, 33]
			}, {
				name: 'B',
				type: 'line',
				smooth: true,
				data: [12, 50, 51, 35, 70, 30, 20]
			}, {
				name: 'C',
				type: 'line',
				smooth: true,
				data: [10, 30, 31, 50, 40, 20, 10]
			}]
		};
	},
	methods: {

	}
}
</script>

<style scoped>
.container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

.container-wrap {
	width: 100%;
	height: 100%;
}
</style>